<template>
	<view style="padding-bottom: 120rpx;">
		<u-navbar
			v-if="!$isWeixin()"
			:customBack="backToHome"
			:title="title"
			:titleWidth="450"
			:titleBold="true"
			:background="{ backgroundColor: '#ffffff' }"
			:is-fixed="true"
		></u-navbar>
		<u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

		<view class="" v-show="tabIndex == 0">
			<u-cell-item title="申请文件" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
			<u-cell-item :arrow="false" style="padding: 10rpx;"><image-upload v-model="applyPhoto"></image-upload></u-cell-item>
			<u-cell-item :arrow="false" title="收货地址">
				<city-select :value="areaCode" @city-change="onCityChange"></city-select>
				<u-input inputAlign="right" v-model="form.Delivery_Address" placeholder="详细地址"></u-input>
			</u-cell-item>
			<u-cell-item :arrow="false">
				<view class="u-font-9 u-text-left">*务必详细确保能收到快递（不必在详细地址栏填写省、市、区，只需填写街道名称，门牌号码，楼层和房间号等信息）</view>
			</u-cell-item>

			<u-cell-item :arrow="false" title="申请备注">
				<u-input type="textarea" :disabled="true" inputAlign="right" placeholder="备注" :value="state.ApplicationRemake"></u-input>
			</u-cell-item>
			
			<block v-if="showReview">
				<u-gap height="40" bg-color="#f5f5f5"></u-gap>
				<review-form ref="reviewForm"></review-form>
			</block>
			
		</view>

		<view class="" v-if="tabIndex == 1"><relations :list="state.Dealer_RelationList"></relations></view>

		<view class="" v-if="tabIndex == 2">
			<basic-information
				v-if="state.ShowLevel == 1"
				:metadata="state.DataBaseInfo"
				:showOtherInfo="false"
				:showReview="false"
				:showGrade="false"
				:showParent="false"
				:loadCity="loadCity"
				:data="{
					Dealer_BaseInfo: state.First_Dealer_BaseInfo
				}"
			></basic-information>

			<block v-if="state.ShowLevel == 2">
				<u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name" :border-bottom="false"></u-cell-item>
				<basic-information
					:metadata="state.DataBaseInfo"
					:showOtherInfo="false"
					:showReview="false"
					:showGrade="false"
					:showParent="false"
					:loadCity="loadCity"
					:data="{
						Dealer_BaseInfo: state.Double_Dealer_BaseInfo
					}"
				></basic-information>
			</block>

			<block v-if="state.ShowLevel == 3">
				<u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
				<u-cell-item title="二级经销商名称" :arrow="false" :value="state.Double_Dealer_BaseInfo.Name" :border-bottom="false"></u-cell-item>
				<store-information :loadCity="loadCity" :data="state.Door_Dealer_BaseInfo"></store-information>
			</block>
		</view>

		<view style="" v-if="tabIndex == 3">
			<view style="background-color: #FFFFFF; padding: 10rpx 0;"><u-button class="u-m-l-30" @tap="addModuleClick()" type="warning" size="mini">添加申请</u-button></view>
			<medals-apply @edit="() => onEdit(item)" @delete="() => onDelete(index)" v-for="(item, index) in form.MedalsList" :key="index" :value="item" :index="index"></medals-apply>
		</view>

		<view class="btn-group-fixed"><u-button v-if="showReview" type="warning" @tap="submit">提交审核</u-button></view>
		<u-toast ref="uToast" />

		<u-popup mode="bottom" height="80%" :border-radius="24" v-model="showApplyModal" :mask-close-able="true" cancel-text="取消" :showLoading="false" :async-close="true">
			<view class="" style="padding-bottom: 120rpx;">
				<view class="u-font-28 u-text-center" style="margin: 20rpx 0;font-weight: bold;">添加奖牌</view>
				<medals-apply-form ref="applyForm" :loadForm="loadForm"></medals-apply-form>
				<view class="btn-group-fixed u-flex">
					<u-button size="medium" @tap="showApplyModal = false">取消</u-button>
					<u-button type="warning" @tap="addModule" size="medium">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '奖牌审核',

			tabList: [{ name: '审核信息' }, { name: '销售业务关系' }, { name: '基本信息' }, { name: '奖牌申请' }],
			tabIndex: 0,

			DealerId: 10195,
			selectType: 5,
			ModultPrototypeAuditId: 10207,

			moduleList: [],
			shellPrototypeList: [],
			entityPrototypeList: [],

			showApplyModal: false,
			loadForm: false,
			loadCity: false,

			showReview: false,

			areaCode: [],

			state: {
				ShowLevel: null,
				First_Dealer_BaseInfo: {},
				Double_Dealer_BaseInfo: {},
				Door_Dealer_BaseInfo: {},
				DoorPhotoList: [],
				Dealer_RelationList: [],
				DataBaseInfo: {}
			},

			applyPhoto: [],

			form: {
				ModultPrototypeAuditId: '',
				DealerId: null,
				Delivery_ProvinceId: null,
				Delivery_CityId: null,
				Delivery_DistrictId: null,
				Delivery_Address: '',
				ApplyForPhoto: '',
				Remake: '',
				MedalsList: [],
				AuditRemark: '',
				State: ''
			}
		};
	},

	onLoad(options) {
		if (options.DealerId) {
			this.DealerId = options.DealerId;
			this.form.DealerId = options.DealerId;
		}
		if (options.Id) {
			this.form.ModultPrototypeAuditId = options.Id;
		}

		this.init();

		if (this.$isWeixin()) {
			uni.setNavigationBarTitle({
				title: this.title
			});
		}
	},

	methods: {
		backToHome() {
			uni.navigateBack();
		},

		onCityChange(e) {
			if (e.province) {
				this.form.Delivery_ProvinceId = e.province.value;
			}
			if (e.city) {
				this.form.Delivery_CityId = e.city.value;
			}
			if (e.area) {
				this.form.Delivery_DistrictId = e.area.value;
			}
		},

		submit() {
			this.form.ApplyForPhoto = this.applyPhoto.map(item => item.Value).join(',');

			this.form.State = this.$refs.reviewForm.form.State;
			this.form.AuditRemark = this.$refs.reviewForm.form.AuditRemark;

			console.log(this.form);

			if (!this.form.State) {
				this.$u.toast('请选择审核状态');
				return false;
			}

			this.$u.api.approvalMedals(this.form).then(res => {
				const { ResultCode, ResultMessage } = res;
				if (ResultCode === 1) {
					this.$refs.uToast.show({
						title: ResultMessage,
						back: true
					});
				}
			});
		},

		addModuleClick(selectType) {
			this.loadForm = false;
			this.showApplyModal = true;
		},

		onEdit(item, selectType) {
			this.loadForm = true;
			this.showApplyModal = true;

			this.$nextTick(() => {
				this.$refs.applyForm.initForm(Object.assign({}, item));
			});
		},

		onDelete(index) {
			this.form.MedalsList.splice(index, 1);
		},

		addModule() {
			const applyForm = this.$refs.applyForm.form;

			if (!this.loadForm) {
				this.form.MedalsList.push({
					uuid: this.$u.guid(),
					GroupId: null,
					editable: true,
					ApplyList: [applyForm]
				});
			} else {
				const current = this.form.MedalsList.find(item => (item.uuid = this.$refs.applyForm.uuid));

				if (current.ApplyList && current.ApplyList.length > 0) {
					current.ApplyList[0] = Object.assign(current.ApplyList[0], this.$u.deepClone(applyForm));
				}
			}

			this.showApplyModal = false;
		},

		getProductList(brandId, selectType) {
			return new Promise((relove, reject) => {
				this.$u.api
					.getProductDic({
						SelectType: selectType,
						BrandId: brandId
					})
					.then(res => {
						console.log(res);
						const { ResultCode, ProductList } = res;
						if (ResultCode === 1) {
							relove(ProductList);
						}
					});
			});
		},

		init() {
			this.$u.api
				.getModuleDetail({
					DealerId: this.DealerId,
					SelectType: this.selectType,
					ModultPrototypeAuditId: this.form.ModultPrototypeAuditId
				})
				.then(res => {
					console.log(res);
					const { ResultCode, ResultData } = res;
					if (ResultCode === 1) {
						this.state = ResultData;

						if (this.vuex_user.ManagerId == res.NextManagerId) {
							this.showReview = true;
						}

						const { ModultMedalsDetail, ApplyForPhoto } = ResultData;

						if (ModultMedalsDetail) {
							ModultMedalsDetail.forEach(item => (item.editable = true));
							this.form.MedalsList = ModultMedalsDetail;
						}

						if (ApplyForPhoto) {
							this.applyPhoto = ApplyForPhoto.split(',').map(item => {
								return {
									Value: item
								};
							});
						}

						if (this.state.ShowLevel == 1) {
							this.form.Delivery_ProvinceId = this.state.First_Dealer_BaseInfo.Delivery_ProvinceId;
							this.form.Delivery_CityId = this.state.First_Dealer_BaseInfo.Delivery_CityId;
							this.form.Delivery_DistrictId = this.state.First_Dealer_BaseInfo.Delivery_DistrictId;
							this.form.Delivery_Address = this.state.First_Dealer_BaseInfo.Delivery_Address;
							this.areaCode = [
								this.state.First_Dealer_BaseInfo.Delivery_ProvinceId,
								this.state.First_Dealer_BaseInfo.Delivery_CityId,
								this.state.First_Dealer_BaseInfo.Delivery_DistrictId
							];
						}
						if (this.state.ShowLevel == 2) {
							this.form.Delivery_ProvinceId = this.state.Double_Dealer_BaseInfo.Delivery_ProvinceId;
							this.form.Delivery_CityId = this.state.Double_Dealer_BaseInfo.Delivery_CityId;
							this.form.Delivery_DistrictId = this.state.Double_Dealer_BaseInfo.Delivery_DistrictId;
							this.form.Delivery_Address = this.state.Double_Dealer_BaseInfo.Delivery_Address;
							this.areaCode = [
								this.state.Double_Dealer_BaseInfo.Delivery_ProvinceId,
								this.state.Double_Dealer_BaseInfo.Delivery_CityId,
								this.state.Double_Dealer_BaseInfo.Delivery_DistrictId
							];
						}
						if (this.state.ShowLevel == 3) {
							this.form.Delivery_ProvinceId = this.state.Door_Dealer_BaseInfo.Delivery_ProvinceId;
							this.form.Delivery_CityId = this.state.Door_Dealer_BaseInfo.Delivery_CityId;
							this.form.Delivery_DistrictId = this.state.Door_Dealer_BaseInfo.Delivery_DistrictId;
							this.form.Delivery_Address = this.state.Door_Dealer_BaseInfo.Delivery_Address;
							this.areaCode = [
								this.state.Door_Dealer_BaseInfo.Delivery_ProvinceId,
								this.state.Door_Dealer_BaseInfo.Delivery_CityId,
								this.state.Door_Dealer_BaseInfo.Delivery_DistrictId
							];
						}

						this.loadCity = true;
					}
				});
		}
	}
};
</script>

<style>
/* 	page {
		background-color: #eaecef;
	} */
</style>
<style lang="scss"></style>
